<template>
    <div>
        <table :width="width" class="personal">
            <tr>
                <td class="courseTemplate-td1">
                    <label>课程名称：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.name}}</td>
                <td class="courseTemplate-td1">
                    <label>课程英文名称：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.nameEn}}</td>
            </tr>
            <tr>
                <td class="courseTemplate-td1">
                    <label>学院：</label>
                </td>
                <td colspan="3">&nbsp;&nbsp;{{content.college}}</td>
            </tr>
            <tr>
                <td  class="courseTemplate-td1">
                    <label>是否公选课：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.isElective?"是":"否"}}</td>
                <td  class="courseTemplate-td1">
                    <label>培养层次：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.trainingLevel}}</td>
            </tr>
            <tr>
                <td  class="courseTemplate-td1">
                    <label>周数：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.weeks}}</td>
                <td  class="courseTemplate-td1">
                    <label>周学时：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.weekHour}}</td>
            </tr>
            <tr>
                <td  class="courseTemplate-td1">
                    <label>总学时：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.period}}</td>
                <td  class="courseTemplate-td1">
                    <label>学分：</label>
                </td>
                <td>&nbsp;&nbsp;{{content.credits}}</td>
            </tr>
        </table>
        <div v-if="showCourse">
            <el-row :gutter="20">
                <el-col :span="3">
                    <span style="line-height:30px;color:#303133">课程代码:</span>
                </el-col>
                <el-col :span="7">
                    <el-input v-model="courseCode" placeholder="请输入课程代码" readonly="true"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" size="small" @click="checkCourseCode">自动分配</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { getCourseById } from "common/src/api/resource/course";
import { autoCode } from "common/src/api/courseTemplate";

export default {
    props: {
        content: {
            default: null
        },
        history: {
            default: null //历史审批记录
        },
        approvalInfo: {
            default: null
        },
        wfType: {
            default: null
        },
        width: {
            type: String,
            default: '700px'
        },
        showCourse: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            courseCode: null,
            showCourse: false //是否显示课程编码
        };
    },
    mounted() {
        //用面包屑的话，用mounted会有问题
        if (!this.history.every(h => h.result == "Process")) {
            return;
        }
        //在流程的最后一步显示
        if (
            (this.wfType == 14 && this.history.length == 2) ||
            (this.wfType == 21 && this.history.length == 3)
        ) {
            this.showCourse = true;
        }
    },
    methods: {
        checkCourseCode() {
            if (this.content && this.content.id) {
                getCourseById(this.content.id).then(res => {
                    if (res.code == 200 && res.data) {
                        autoCode(res.data).then(response => {
                            if (response.code == 200) {
                                this.courseCode = response.data;
                                this.approvalInfo.content =
                                    '{code:"' + this.courseCode + '"}';
                            }
                        });
                    }
                });
            }
        },
        //仅在对应流程的最后一步验证课程编码
        valid() {
            if (this.wfType == 14 && this.history.length < 2) {
                return true;
            }
            if (this.wfType == 21 && this.history.length < 3) {
                return true;
            }
            if (!this.courseCode) {
                this.$message({
                    type: "warning",
                    message: "无效的课程代码"
                });
            }
            return this.courseCode ? true : false;
        }
    }
};
</script>

<style lang="scss" scoped>
.personal {
	border-collapse: collapse;
	border: 1px solid #000000;
	margin: 20px;
	td,
	th {
		line-height: 30px;
		border-collapse: collapse;
		border: 1px solid #a5a5a5;
		background: #fff;
		color: #606266;
	}
	label {
		color: #999;
    }
    .courseTemplate-td1 {
       width:20%;
       background: #F5F7F9;
       text-align: right;
    }
}
</style>
